<%--
  Created by IntelliJ IDEA.
  User: MyUser
  Date: 2025/4/11
  Time: 12:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 页面元信息 -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Bootstrap 5 CSS from jsDelivr CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

  <title>个人中心 - 社区论坛</title>

  <style>
    /* 自定义样式 */
    body {
      background-color: #f8f9fa;
    }
    .profile-container {
      max-width: 1200px;
      margin: 2rem auto;
    }
    .profile-header {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
      padding: 2rem;
      margin-bottom: 2rem;
    }
    .profile-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .profile-stats {
      display: flex;
      gap: 2rem;
      margin-top: 1.5rem;
    }
    .stat-item {
      text-align: center;
    }
    .stat-number {
      font-size: 1.5rem;
      font-weight: bold;
      color: #0d6efd;
    }
    .stat-label {
      font-size: 0.875rem;
      color: #6c757d;
    }
    .posts-container {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.05);
      padding: 2rem;
    }
    .post-card {
      padding: 1.5rem;
      border-bottom: 1px solid #eee;
      transition: all 0.2s;
    }
    .post-card:hover {
      background-color: #f8f9fa;
    }
    .post-title {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    .post-meta {
      color: #6c757d;
      font-size: 0.875rem;
      margin-bottom: 0.5rem;
    }
    .post-excerpt {
      color: #495057;
      margin-bottom: 1rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .post-actions {
      display: flex;
      gap: 1rem;
    }
    .action-btn {
      display: flex;
      align-items: center;
      color: #6c757d;
      text-decoration: none;
      font-size: 0.875rem;
    }
    .action-btn:hover {
      color: #0d6efd;
    }
    .action-btn i {
      margin-right: 0.25rem;
    }
    .nav-tabs .nav-link {
      color: #495057;
      font-weight: 500;
    }
    .nav-tabs .nav-link.active {
      color: #0d6efd;
      font-weight: 600;
    }
    .edit-btn {
      color: #6c757d;
      text-decoration: none;
      font-size: 0.875rem;
    }
    .edit-btn:hover {
      color: #0d6efd;
    }
    .empty-state {
      text-align: center;
      padding: 3rem;
      color: #6c757d;
    }
    .empty-state i {
      font-size: 3rem;
      margin-bottom: 1rem;
      color: #dee2e6;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">社区论坛</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">热门</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">分类</a>
        </li>
      </ul>
      <ul class="navbar-nav ms-3">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
            <img src="https://img0.baidu.com/it/u=3985150573,583103601&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="用户头像" class="rounded-circle" width="30" height="30">
          </a>
          <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="#">退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 个人中心内容 -->
<div class="container profile-container">
  <!-- 个人信息头部 -->
  <div class="profile-header">
    <div class="row align-items-center">
      <div class="col-md-2 text-center">
        <img src="https://img0.baidu.com/it/u=3985150573,583103601&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="用户头像" class="profile-avatar">
      </div>
      <div class="col-md-6">
        <h2>张三</h2>
        <p class="text-muted mb-2">用户ID: user123</p>
        <p>前端开发工程师 | Bootstrap爱好者</p>
        <button class="btn btn-outline-primary btn-sm">编辑资料</button>
      </div>
      <div class="col-md-4">
        <div class="profile-stats">
          <div class="stat-item">
            <div class="stat-number">28</div>
            <div class="stat-label">帖子</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">356</div>
            <div class="stat-label">获赞</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">1.2k</div>
            <div class="stat-label">浏览</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 帖子列表 -->
  <div class="posts-container">
    <ul class="nav nav-tabs mb-4">
      <li class="nav-item">
        <a class="nav-link active" href="#">我的帖子</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">评论</a>
      </li>
    </ul>

    <!-- 帖子列表内容 -->
    <div class="post-list">
      <!-- 帖子项1 -->
      <div class="post-card">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <h3 class="post-title">如何使用Bootstrap 5快速搭建响应式网站</h3>
            <div class="post-meta">
              <span>发布于 2023-05-15</span>
              <span class="mx-2">|</span>
              <span>最后编辑于 2023-05-16</span>
              <span class="mx-2">|</span>
              <span>技术讨论</span>
            </div>
            <p class="post-excerpt">
              Bootstrap 5是最流行的前端框架之一，它提供了一套完整的工具集，可以帮助开发者快速构建响应式网站。本文将介绍如何使用Bootstrap 5的基本组件和布局系统...
            </p>
          </div>
          <a href="UpdatePost.jsp" class="edit-btn" title="编辑">
            <i class="bi bi-pencil"></i>
          </a>
        </div>
        <div class="post-actions">
          <a href="#" class="action-btn">
            <i class="bi bi-hand-thumbs-up"></i>
            <span>42</span>
          </a>
          <a href="#" class="action-btn">
            <i class="bi bi-chat-square-text"></i>
            <span>15</span>
          </a>
          <a href="#" class="action-btn">
            <i class="bi bi-eye"></i>
            <span>256</span>
          </a>
        </div>
      </div>

      <!-- 帖子项2 -->
      <div class="post-card">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <h3 class="post-title">JavaScript ES6新特性全面解析</h3>
            <div class="post-meta">
              <span>发布于 2023-04-28</span>
              <span class="mx-2">|</span>
              <span>最后编辑于 2023-04-30</span>
              <span class="mx-2">|</span>
              <span>前端开发</span>
            </div>
            <p class="post-excerpt">
              ES6为JavaScript带来了许多令人兴奋的新特性，如箭头函数、类、模块、解构赋值等。本文将详细介绍这些新特性及其使用场景...
            </p>
          </div>
          <a href="UpdatePost.jsp" class="edit-btn" title="编辑">
            <i class="bi bi-pencil"></i>
          </a>
        </div>
        <div class="post-actions">
          <a href="#" class="action-btn">
            <i class="bi bi-hand-thumbs-up"></i>
            <span>38</span>
          </a>
          <a href="#" class="action-btn">
            <i class="bi bi-chat-square-text"></i>
            <span>12</span>
          </a>
          <a href="#" class="action-btn">
            <i class="bi bi-eye"></i>
            <span>198</span>
          </a>
        </div>
      </div>

      <!-- 帖子项3 -->
      <div class="post-card">
        <div class="d-flex justify-content-between align-items-start">
          <div>
            <h3 class="post-title">Vue 3组合式API入门指南</h3>
            <div class="post-meta">
              <span>发布于 2023-04-10</span>
              <span class="mx-2">|</span>
              <span>最后编辑于 2023-04-12</span>
              <span class="mx-2">|</span>
              <span>Vue.js</span>
            </div>
            <p class="post-excerpt">
              Vue 3引入了组合式API，这是一种全新的编写组件逻辑的方式。本文将介绍组合式API的基本概念、使用方法和最佳实践...
            </p>
          </div>
          <a href="UpdatePost.jsp" class="edit-btn" title="编辑">
            <i class="bi bi-pencil"></i>
          </a>
        </div>
        <div class="post-actions">
          <a href="#" class="action-btn">
            <i class="bi bi-hand-thumbs-up"></i>
            <span>29</span>
          </a>
          <a href="#" class="action-btn">
            <i class="bi bi-chat-square-text"></i>
            <span>8</span>
          </a>
          <a href="#" class="action-btn">
            <i class="bi bi-eye"></i>
            <span>145</span>
          </a>
        </div>
      </div>

      <!-- 空状态示例（无帖子时显示） -->
      <!-- <div class="empty-state">
          <i class="bi bi-file-earmark-text"></i>
          <h4>暂无帖子</h4>
          <p>您还没有发布过任何帖子，点击下方按钮开始创作</p>
          <a href="create_post.jsp" class="btn btn-primary">发布新帖子</a>
      </div> -->
    </div>

    <!-- 分页 -->
    <nav aria-label="Page navigation" class="mt-4">
      <ul class="pagination justify-content-center">
        <li class="page-item disabled">
          <a class="page-link" href="#" tabindex="-1">上一页</a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
          <a class="page-link" href="#">下一页</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<!-- 页脚 -->
<footer class="bg-light py-4 mt-5">
  <div class="container text-center text-muted">
    <p>© 2023 社区论坛. 保留所有权利.</p>
  </div>
</footer>

<!-- Bootstrap 5 JS Bundle with Popper from jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- 页面交互脚本 -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 这里可以添加页面交互逻辑
    // 例如: 点赞功能、编辑按钮点击等

    // 模拟点赞功能
    document.querySelectorAll('.action-btn .bi-hand-thumbs-up').forEach(icon => {
      icon.addEventListener('click', function(e) {
        e.preventDefault();
        const btn = this.closest('.action-btn');
        const countSpan = btn.querySelector('span');
        let count = parseInt(countSpan.textContent);

        if (btn.classList.contains('liked')) {
          count--;
          btn.classList.remove('liked');
          this.classList.remove('bi-hand-thumbs-up-fill');
          this.classList.add('bi-hand-thumbs-up');
        } else {
          count++;
          btn.classList.add('liked');
          this.classList.remove('bi-hand-thumbs-up');
          this.classList.add('bi-hand-thumbs-up-fill');
        }

        countSpan.textContent = count;
      });
    });
  });
</script>
</body>
</html>
